import React from 'react';
import { Card, Avatar, Space, List } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { getUserName, getUserRole, getUserFrom, getUserLoginTime } from '../utils/auth'; 
import "../output.css";

const User: React.FC = () => {
  const loginHistory = [{
    time: getUserLoginTime(),
    device: "PC" //硬编码 后续通过后端api实现
  }]

  return (
    <div className="w-full flex justify-center items-center min-h-screen bg-gray-100">
      <Card title="管理员信息" className='w-full sm:w-96 shadow-md rounded-lg overflow-hidden'>
        <Space direction="vertical" align="center" className="mb-4">
          <div className='flex flex-col items-center justify-center w-80'> {/* 此处使用固定宽度来解决布局问题 须留意 */}
          <Avatar
            size={80}
            icon={<UserOutlined />}
            style={{ backgroundColor: '#1890ff', fontSize: '32px' }}
            
          />
          <span className='text-xl font-semibold'>{getUserName()}</span>
          <span className='text-gray-500'>{getUserRole()}</span>
          <span className='text-gray-500'>{getUserFrom()}</span>
          </div>
        </Space>
        <List
          header={<div>最近登录记录</div>}
          bordered
          dataSource={loginHistory}
          renderItem={(item, index) => (
            <List.Item>
              <List.Item.Meta
                title={`登录时间: ${item.time}`}
                description={`设备: ${item.device} 未使用时请及时注销`}
              />
            </List.Item>
          )}
        />
      </Card>
      
    </div>
  )
}

export default User;